<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const props = withDefaults(defineProps<{
    back: Function
}>(), {
    back: () => {}
})

const state = reactive({
    orderInfo: {
        orderCode: 'XS120230629111633773',
        cellTime: '2023-06-29 11:17:12',
        oprationTime: '2023-06-29 11:17:12',
        userName: '人参',
        phone: '17777477007',
        paymentInfo: {
            type: 5,
            count: 12,
            totla: 2541,
            paymentNumber: 4512,
            money: 564
        },
        returnMoney: [
            {
                returnMethods: {
                    type: 10,
                    totalMoney: 125
                },
                info: {
                    orderNumber: 'TK120230703152100864',
                    time: '2023-07-03 15:21:36',
                    tableData: [
                        {
                            id: 45,
                            name: '哇哈哈',
                            price: 45,
                            count: 12,
                            total: 564,
                            ratio: '员工: 久儿 业绩比例: 100%'
                        }
                    ]
                }
            }
        ]
    },
    tableData: [
        {
            id: 1
        }
    ],
})

const back = () => {
    props.back()
}
</script>

<template>
    <main class="order-info-wrapper">
        <el-card shadow="hover">
            <section class="order-info">
                <p>订单号：{{ state.orderInfo.orderCode }}</p>
                <p>销售时间：{{ state.orderInfo.cellTime }}</p>
                <p>操作时间：{{ state.orderInfo.oprationTime }}</p>
                <p>会员名：{{ state.orderInfo.userName }}</p>
                <p>手机号：{{ state.orderInfo.phone }}</p> 
                <el-button  @click="back" :icon="ArrowLeft"  >返回</el-button>
            </section>
        </el-card>
        <el-card shadow="hover" class="mt20">
            <section class="flex-c">
                <section class="card-item-tags">详</section>
                <h3>详情</h3>
            </section>
            <section class="line mt10 mb20"></section>

            <el-table :data="state.tableData" style="width: 100%" border> 
                <el-table-column label="序号" prop="cardItemName" show-overflow-tooltip width="120">
                    <template #default="scope">
                        <p class="order-number">{{ scope.$index + 1 }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="cellPrice" />
                <el-table-column label="销售价格" prop="orderPrice" />
                <el-table-column label="购买数量" prop="cellPrice" />
                <el-table-column label="总价" prop="buyCount"  />
                <el-table-column label="业绩比例" prop="buyCount"  /> 
            </el-table>
        </el-card>

        <el-card shadow="hover" class="mt20">
            <section class="flex-c">
                <section class="card-item-tags">
                    <svg t="1702885741312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" width="18" height="18"><path d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z" fill="#ffffff" p-id="2517"></path></svg>
                </section>
                <h3>支付详情</h3>
            </section>
            <section class="line mt10 mb20"></section>

            <section class="">
                <h3 class="mb20">
                    您总计购买 
                    <span class="color-danger" >{{ state.orderInfo.paymentInfo.type }}</span> 
                    种商品共 <span class="color-danger" >{{ state.orderInfo.paymentInfo.count }}</span> 个 
                    商品总计：<small class="color-danger">¥</small> <span class="color-danger" >{{ state.orderInfo.paymentInfo.totla }}</span> 
                </h3>
                <h3>
                    现金：
                    <small class="color-danger">¥</small> <span class="color-danger" >
                        {{ state.orderInfo.paymentInfo.money }}
                    </span>&emsp;
                    欠款：
                    <small class="color-danger">¥</small> <span class="color-danger" >
                        {{ state.orderInfo.paymentInfo.money }}
                    </span>&emsp;
                </h3>
            </section>

            <el-row justify="end">
                <el-col :span="24" class="flex-end-center">
                    <h3>总支付金额：<small class="color-danger">¥</small> <span class="color-danger" >{{ state.orderInfo.paymentInfo.paymentNumber }}</span></h3>
                </el-col>
            </el-row> 
        </el-card>

        <section v-for="(item, index) of state.orderInfo.returnMoney" :key="index">
            <el-card shadow="hover" class="mt20">
                <section class="flex-c">
                    <section class="card-item-tags">还</section>
                    <h3>还款详情</h3>
                    <p class="ml20">订单号：{{ item.info.orderNumber }}</p>
                    <p class="ml20">还款时间：{{ item.info.time}}</p>
                </section>
                <section class="line mt10 mb20"></section>
                <el-table :data="item.info.tableData" style="width: 100%" border> 
                    <el-table-column label="序号" prop="cardItemName" >
                        <template #default="scope">
                            <p class="order-number">{{ scope.$index + 1 }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" prop="name" />
                    <el-table-column label="销售价格" prop="price" />
                    <el-table-column label="购买数量" prop="count" />
                    <el-table-column label="总价" prop="total"  />
                    <el-table-column label="业绩比例" prop="ratio"  /> 
                </el-table>
            </el-card>

            <el-card shadow="hover" class="mt20">
                <section class="flex-c">
                    <section class="card-item-tags">
                        <svg t="1702885741312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" width="18" height="18"><path d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z" fill="#ffffff" p-id="2517"></path></svg>
                    </section>
                    <h3>还款支付</h3>
                </section>
                <section class="line mt10 mb20"></section>
                <h3>现金：
                    <small class="color-danger">¥</small> 
                    <span class="color-danger" >
                        {{ item.returnMethods.type }}
                    </span>
                </h3>
                <el-row justify="end">
                    <el-col :span="24" class="flex-end-center">
                        <h3>总还款金额：<small class="color-danger">¥</small> <span class="color-danger" >{{ item.returnMethods.totalMoney }}</span></h3>
                    </el-col>
                </el-row> 
            </el-card>
            
        </section>
    </main>
</template>

<style lang='scss' scoped>
.flex-c{
    display: flex;
    align-items: center;
}
.line{
    height: 1px;
    background-color: #ededed; 
}
.order-info-wrapper{
    background-color: #fff;
    .order-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-item-tags{
        width: 28px;
        height: 28px;
        background-color: #fd5958;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        margin-right: 6px;
    }
    .order-number{
        width: 22px;
        height: 22px; 
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #999;
    }
}
</style>